<template>
	<view class="page">
		<u-card :show-head="false" padding="10" :border="false" margin="20rpx 0" border-radius="0"
			:foot-border-top="false" v-for="(item,index) in list" :key="index">
			<view class="" slot="body">
				<view class="u-body-item" v-for="(itm,idx) in headers" :key="idx">
					<view class="item">
						<view class="title">{{itm}}</view>
						<view class="info">{{item[itm]}}</view>
					</view>
				</view>
			</view>
			<view class="u-footer" slot="foot">
				<u-button v-if="enquiryStatus === 'toBeQuoted'" type="primary" @click="offer(item.id,'报价')"
					:custom-style="customStyle" plain size="medium">
					报价
				</u-button>
				<u-button v-else type="primary" v-if="enquiryStatus === 'toBeConfirmed' || enquiryStatus === 'pending'"
					@click="offer(item.id,'修改报价',item['报价'])" :custom-style="customStyle" plain size="medium">
					修改报价
				</u-button>
				<u-button type="primary" v-if="enquiryStatus !== 'toBeQuoted'" @click="view(item)"
					:custom-style="customStyle" plain size="medium">
					查看排名
				</u-button>
				<u-button v-if="item['调整报价'] != ''&&(enquiryStatus === 'toBeConfirmed' || enquiryStatus === 'pending')"
					type="primary" @click="confirm(item)" :custom-style="customStyle" plain size="medium">
					接受报价
				</u-button>
			</view>
		</u-card>
		<offerPopup ref="offerPopup" @callback="getList" />
		<rankingPopup ref="rankingPopup" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import offerPopup from "../../components/offer-popup.vue"
	import rankingPopup from "./rankingPopup.vue"
	export default {
		data() {
			return {
				customStyle: {
					marginLeft: '20rpx',
					marginTop: '20rpx'
				},
				inquiryId: "",
				itemId: "",
				itemNo: "",
				enquiryStatus: "",
				list: [],
				headers: []
			}
		},
		components: {
			offerPopup,
			rankingPopup
		},
		onLoad(option) {
			if (option.id) {
				this.inquiryId = option.id
				this.itemId = option.itemId
				this.itemNo = option.itemNo
				this.enquiryStatus = option.enquiryStatus
			}
		},
		onShow() {
			this.list = []
			this.headers = []
			this.getList()
		},
		methods: {
			//获取数据列表
			getList() {
				uni.showLoading({
					title: '加载中'
				})
				this.$u.api.carrier.getInquiryItemDetail({
					id: this.itemId,
				}).then(data => {
					uni.hideLoading()
					if (data.code === 200 && data.success) {
						this.list = data.data.data;
						this.headers = data.data.header
						console.log(this.list);
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			//接受报价
			confirm(item) {
				uni.showModal({
					title: `是否确定接受报价?`,
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中'
							})
							this.$u.api.carrier.confirmOffer(item.id).then(data => {
								uni.hideLoading()
								if (data.code === 200 && data.success) {
									this.$refs.uToast.show({
										title: data.msg,
										type: 'success',
										duration: 1000
									})
									this.getList()
								}
							}).catch(() => {
								uni.hideLoading()
							})
						}
					}
				})
			},
			//报价
			offer(id, title, price) {
				this.$refs.offerPopup.open(id, title, price)
			},
			//查看排名
			view(item) {
				this.$refs.rankingPopup.open(item.zrateItem, this.itemNo, this.inquiryId, this.itemId)
			}
		}
	}
</script>

<style lang="less">
	.page {
		min-height: 100vh;
		width: 750rpx;
		background-color: #f9f9f9;

		.u-body-item {
			font-size: 28rpx;
			color: #999999;
			width: 100%;
			padding: 0rpx 30rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				.title {
					width: 230rpx;
				}

				.info {
					width: 440rpx;
					color: #333333;
					word-break: break-all;
				}
			}
		}

		.u-footer {
			display: flex;
			justify-content: flex-end;
			flex-wrap: wrap;

			button {
				padding: 0 40rpx;
			}
		}
	}
</style>
